import React from 'react';
import {Layout, Input, Button, Table, Menu, Dropdown, Modal, Radio, DatePicker,Select,message} from 'antd'
import WithMon from './with-mon'
import {PayCircleOutlined,CopyOutlined,RollbackOutlined} from '@ant-design/icons';
import {NavLink} from 'react-router-dom'
import './Voucher.css'
import {observer,inject} from 'mobx-react'
import moneyMan from "../../../store/MoneyMan/MoneyMan";
import axios from "../../../util/http";
import * as url from "../../../util/api";
const { Option } = Select;
// const { RangePicker } = DatePicker;
// let selectValue = '';
const { Search,TextArea } = Input;

function onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra);
}
//资金账户
@inject('moneyMan')
@observer
class CapitalAccount extends React.Component {
    constructor(props){
        super(props)
        this.state={
            visibleA:false,
            visible:false,
            totalAccount:'',
            paymentMethod:'',
            fundId:'',
            note:'',
            data:'',
            TopupAccount:'',
            isShowMoney:{
                visibility: 'hidden',
            },
            isShowZhaiyao:{
                visibility: 'hidden',
            },
            amount:'',
            summary:'',
            clientId:'大力',
            getData:'',
            nextData:'',

        }
    }
    componentDidMount() {
        axios({
            url:url.getCapitalAccount,
            method:'get',
        }).then(res=>{
            // console.log(res.data.data)
            this.setState({
                getData:res.data.data,
                nextData:res.data.data,
            })
        })
        // this.props.moneyMan.getRefundSure()
        // this.props.moneyMan.getRefundSure('hh').then(res=>{
        //     console.log(res)
        // })
    }
    searchData=(value)=>{
        // console.log(value)
        let Data = this.state.getData
        if (value===''){
            let next = this.state.nextData
            this.setState({
                getData:next
            })
        } else{
            let newData = Data.filter(item=>{
                return item.clientId===value
            })
            this.setState({
                getData:newData
            })
        }

    }
    dropdownMenu=(text, record)=> {
        const menu = (
            <Menu>
                <Menu.Item>
                    <NavLink to='/homepage/capitalsubsidiary' onClick={this.ceshi.bind(this,text,record)}>
                        <CopyOutlined style={{marginRight:'10px'}}/>明细
                    </NavLink>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer"  onClick={this.showModal.bind(this,text,record)}>
                        <PayCircleOutlined style={{marginRight:'10px'}}/>充值
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer"  onClick={this.showModalA.bind(this,text,record)}>
                        <RollbackOutlined style={{marginRight:'10px'}}/>扣款
                    </a>
                </Menu.Item>
            </Menu>
        );
        return(
            <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                    . . .
                </a>
            </Dropdown>
        )
    }
    ceshi=(text,record,e)=>{
        this.props.moneyMan.CapitalAccountList=text
        console.log(text)
    }
    //扣款模态框
    showModalA = (text,record,e) => {
        let {totalAccount,paymentMethod,fundId,note,data,clientId}=text
        this.setState({
            visibleA: true,
            totalAccount:totalAccount,
            paymentMethod:paymentMethod,
            fundId:fundId,
            note:note,
            data:data,
            clientId:clientId,

        });
    };
    handleOkA = e => {
        console.log(e);
        if(this.state.amount===''){
            this.setState({
                isShowMoney:{
                    visibility: 'visible',
                }
            })
        }
        if (this.state.summary===''){
            this.setState({
                isShowZhaiyao:{
                    visibility: 'visible',
                }
            })
        }
        if (this.state.amount!==''||this.state.summary!==''){
            this.setState({
                visibleA: false,
            });
            message.success('扣款成功');
        }
    };
    handleCancelA = e => {
        console.log(e);
        this.setState({
            visibleA: false,
        });
    };
    //充值模态框
    showModal = (text,record,e) => {
        console.log(text)
        let {totalAccount,paymentMethod,fundId,note,data,clientId}=text
        this.setState({
            visible: true,
            totalAccount:totalAccount,
            paymentMethod:paymentMethod,
            fundId:fundId,
            note:note,
            data:data,
            clientId:clientId,

        });
    };

    handleOk = e => {
        console.log(e);
        if(this.state.amount===''){
            this.setState({
                isShowMoney:{
                    visibility: 'visible',
                }
            })
        }
        if (this.state.summary===''){
            this.setState({
                isShowZhaiyao:{
                    visibility: 'visible',
                }
            })
        }
        if (this.state.amount!==''||this.state.summary!==''){
            this.setState({
                visible: false,
            });
            message.success('充值成功');
        }

    };
    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    onChangeInput=(title,e)=>{
        this.setState({
            [title]:e.target.value
        })
    }
    onChangeInputA=(title,connect,e)=>{
        this.setState({
            [title]:e.target.value
        })
        if (e.target.value===''){
            this.setState({
                [connect]:{
                    visibility: 'visible',
                }
            })
        } else{
            this.setState({
                [connect] :{
                    visibility:'hidden'
                }
            })
        }
    }
    handleChange=(title,value)=>{
        // console.log(title,value)
        this.setState({
            [title]:value
        })
    }
    onChangeInputD=(value)=>{
        this.setState({
            data:value
        })
    }
    render() {
        const columns = [
            {
                title: '客户名称',
                dataIndex: 'clientId',
                align:'center',
            },
            {
                title: '现金账户',
                dataIndex: 'cashAccount',
                align:'center',
            },
            {
                title: '预付款帐户',
                dataIndex: 'prepaymentAccount',
                align:'center',
            },
            {
                title: '返点账户',
                dataIndex: 'rebateAccount',
                align:'center',
            },
            {
                title: '总计',
                dataIndex: 'totalAccount',
                align:'center',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
                    <span>
                {this.dropdownMenu(text, record)}
            </span>
                ),
            },
        ];
        const data = [
            {
                key: '1',
                fundId:'2',
                clientId: '大力出场',
                cashAccount: 98,
                prepaymentAccount: 0,
                rebateAccount: 0,
                totalAccount:98,
                amount:12,//充值或扣款金额
                data:'2020-05-11 10:16:08',//充值金额时间
                summary:'摘要',
                note:'备注',
                paymentMethod:'现金',//支付方式
                TopupAccount:'现金账户',//充值账户，（现金账户，返点账户）
            },
            {
                key: '2',
                fundId:'3',
                clientId: '大力猪场',
                cashAccount: 90,
                prepaymentAccount: 0,
                rebateAccount: 0,
                totalAccount:90,
                amount:133,//充值或扣款金额
                data:'2020-05-11 10:16:08',//充值金额时间
                summary:'摘要',
                note:'备注',
                paymentMethod:'现金',//支付方式
                TopupAccount:'现金账户',//充值账户，（现金账户，返点账户）
            },
            {
                key: '3',
                fundId:'4',
                clientId: '小叮当出场',
                cashAccount: 980,
                prepaymentAccount: 0,
                rebateAccount: 0,
                totalAccount:980,
                amount:120,//充值或扣款金额
                data:'2020-05-11 10:16:08',//充值金额时间
                summary:'摘要',
                note:'备注',
                paymentMethod:'现金',//支付方式
                TopupAccount:'现金账户',//充值账户，（现金账户，返点账户）
            },
            {
                key: '4',
                fundId:'5',
                clientId: '大力大力',//经销商名称
                cashAccount: 908,
                prepaymentAccount: 0,
                rebateAccount: 0,
                totalAccount:908,
                amount:102,//充值或扣款金额
                data:'2020-05-11 10:16:08',//充值金额时间
                summary:'摘要',
                note:'备注',
                paymentMethod:'现金',//支付方式
                TopupAccount:'现金账户',//充值账户，（现金账户，返点账户）
            },
        ];
        const notes =this.state.notes
        return (
            <div>
                <Layout style={{backgroundColor:'white',marginTop:'20px'}}>
                    <div className='topBox'>
                            <Search
                                placeholder="请输入经销商名称"
                                onSearch={this.searchData}
                                style={{width:400}}
                            />
                        <div className='MoneyRight'>
                            <Button style={{marginRight:'20px'}}>导入</Button>
                            <Button type="primary">导出</Button>
                        </div>
                    </div>
                    <div className='accountSum'>
                        <div className='accountLeft'>
                            <div className='titleM'>现金账户 余额统计</div>
                            <div className='moneySum'>0：00</div>
                        </div>
                        <div className='accountCenter'>
                            <div className='titleM'>预付款账户 余额总计</div>
                            <div className='moneySum'>0：00</div>
                        </div>
                        <div className='accountRight'>
                            <div className='titleM'>返点账户 余额总计</div>
                            <div className='moneySum'>0：00</div>
                        </div>
                    </div>
                </Layout>
                <div className='tableBox'>
                    <Table columns={columns} dataSource={this.state.getData} onChange={onChange} />
                </div>
                <Modal
                    title="充值"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消"
                >
                    <div>
                        <div className='bottomL'>
                            <span className='titleLeft'>经销商名称</span>
                            <Input value={this.state.clientId}   disabled={true}  style={{width:300}} />
                        </div>
                        <div className='bottomL'>
                            <span className='titleLeft'>充值账户</span>
                            <Select  style={{width:300}} defaultValue="现金账户"  onChange={this.handleChange.bind(this,'TopupAccount')}>
                                <Option value="现金账户">现金账户</Option>
                                <Option value="返点账户">返点账户</Option>
                            </Select>
                        </div>
                        <div className='boxMon'>
                            <span className='titleLeft'>金额</span>
                            <div>
                                <Input value={this.state.amount} onChange={this.onChangeInputA.bind(this,'amount','isShowMoney')} style={{width:300,height:'30px'}} />
                                <div style={this.state.isShowMoney} className='redM'>金额不能为空</div>
                            </div>
                        </div>
                        <div className='boxMon'>
                            <span className='titleLeft'>充值摘要</span>
                            <div>
                                <Input value={this.state.summary} onChange={this.onChangeInputA.bind(this,'summary','isShowZhaiyao')}  style={{width:300,height:'30px'}} />
                                <div style={this.state.isShowZhaiyao} className='redM'>充值摘要不能为空</div>
                            </div>

                        </div>
                        <div className='bottomL'>
                            <span className='titleLeft'>收款方式</span>
                            <Radio.Group  value={this.state.value}  onChange={this.onChangeInput.bind(this,'paymentMethod')} >
                                <Radio value='现金'>现金</Radio>
                                <Radio value='银行转账'>银行转账</Radio>
                            </Radio.Group>
                        </div>
                        <div className='bottomL'>
                            <span className='titleLeft'>充值日期</span>
                            <DatePicker   style={{width:300,height:'30px'}} showTime onChange={this.onChangeInputD} onOk={this.onOk} />
                        </div>
                        <div className='bottomL'>
                            <span className='titleLeft'>备注</span>
                            <TextArea
                                value={notes}
                                style={{width:300}}
                                onChange={this.onChangeInput.bind(this,'notes')}
                                placeholder="Controlled autosize"
                                autoSize={{ minRows: 3, maxRows: 5 }}
                            />
                        </div>
                        <div className='bottomL'><span className='titleLeft'>附件</span><span>添加附件<span>建议上传订单付款凭证，如汇款单等；附件支持JPG,PNG,Word,Excel,TxT格式，大小不超过14M</span></span></div>

                    </div>

                </Modal>
                <Modal
                    title="扣款"
                    visible={this.state.visibleA}
                    onOk={this.handleOkA}
                    onCancel={this.handleCancelA}
                    okText="确认"
                    cancelText="取消"
                >
                    <div>
                        <div className='bottomL'>
                            <span className='titleLeft'>经销商名称</span>
                            <Input value={this.state.clientId} valu={this.state.clientId}  disabled={true}  style={{width:300}} />
                        </div>
                        <div className='bottomL'>
                            <span className='titleLeft'>扣款账户</span>
                            <Select  style={{width:300}} defaultValue="现金账户"  onChange={this.handleChange.bind(this,'TopupAccount')}>
                                <Option value="现金账户">现金账户</Option>
                                <Option value="返点账户">返点账户</Option>
                            </Select>
                        </div>
                        <div className='boxMon'>
                            <span className='titleLeft'>金额</span>
                            <div>
                                <Input value={this.state.amount} onChange={this.onChangeInputA.bind(this,'amount','isShowMoney')} style={{width:300,height:'30px'}} />
                                <div style={this.state.isShowMoney} className='redM'>金额不能为空</div>
                            </div>
                        </div>
                        <div className='boxMon'>
                            <span className='titleLeft'>扣款摘要</span>
                            <div>
                                <Input value={this.state.summary} onChange={this.onChangeInputA.bind(this,'summary','isShowZhaiyao')}  style={{width:300,height:'30px'}} />
                                <div style={this.state.isShowZhaiyao} className='redM'>充值摘要不能为空</div>
                            </div>

                        </div>
                        {/*<div className='bottomL'>*/}
                        {/*    <span className='titleLeft'>收款方式</span>*/}
                        {/*    <Radio.Group  value={this.state.value}  onChange={this.onChangeInput.bind(this,'paymentMethod')} >*/}
                        {/*        <Radio value='现金'>现金</Radio>*/}
                        {/*        <Radio value='银行转账'>银行转账</Radio>*/}
                        {/*    </Radio.Group>*/}
                        {/*</div>*/}
                        <div className='bottomL'>
                            <span className='titleLeft'>扣款日期</span>
                            <DatePicker   style={{width:300,height:'30px'}} showTime onChange={this.onChangeInputD} onOk={this.onOk} />
                        </div>
                        <div className='bottomL'>
                            <span className='titleLeft'>备注</span>
                            <TextArea
                                value={notes}
                                style={{width:300}}
                                onChange={this.onChangeInput.bind(this,'notes')}
                                placeholder="Controlled autosize"
                                autoSize={{ minRows: 3, maxRows: 5 }}
                            />
                        </div>
                        {/*<div className='bottomL'><span className='titleLeft'>附件</span><span>添加附件<span>建议上传订单付款凭证，如汇款单等；附件支持JPG,PNG,Word,Excel,TxT格式，大小不超过14M</span></span></div>*/}

                    </div>
                </Modal>
            </div>
        );
    }
}

export default WithMon('资金账户')(CapitalAccount);